<template>
  <div id="app">
    <!-- v-show:通过添加和删除display:none的样式来进行元素的显示和隐藏 -->
    <!-- <div v-show="flag">v-show的显示和隐藏</div> -->
    <!-- v-if是动态的向DOM树内添加或者删除DOM元素 -->
    <div v-if="flag">v-show的显示和隐藏</div>
    <button @click="toggoleFun">切换元素显示和隐藏v-show</button>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      score: 50,
      flag: true,
    };
  },
  methods: {
    toggoleFun() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style>
</style>
